<template>
  <v-chart
    :options="option"
    :autoresize="true"
    theme="chartsTheme"
  />
</template>
<script>
// var data = [6, 5, 4, 3, 2];
var data = [2, 3, 4, 5, 6];
var data1 = [2, 3, 4, 5, 6];
var data2 = [2, 3, 4, 5, 6];
var data3 = [2, 3, 4, 5, 6];
var titlename = [
  "西万路",
  "西门",
  "明德门",
  "朱宏路",
  "凤城十路"
];
var valdata = [1, 2, 3, 4, 5];
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

export default {
  components: {},
  data() {
    return {
      option: {
        // color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
        title: {
          text: "站点违规事件排名TOP5",
          // subtext: "违规事件"
        },
        grid: {
          top: "25%",
          bottom: "-20"
        },
        legend: {
          data: ['卸油区', '加油区','财务室','便利店']
        },
        // backgroundColor: '#0e2147',
        xAxis: {
          show: false
        },
        yAxis: [
          {
            show: true,
            type: 'category',
            data: titlename,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: function(value, index) {
                  var num = myColor.length;
                  return myColor[index % num];
                }
              },
              formatter: function(value, index) {
                return ["{title|" + value + "} "].join("\n");
              },
              rich: {}
            }
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                color: function(value, index) {
                  var num = myColor.length;
                  return myColor[index % num];
                }
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "卸油区",
            type: "bar",
            data: [4, 4, 5, 5, 6],
            stack: '总量',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 0, 0, 20],
                // color: function(params) {
                //   var num = myColor.length;
                //   return myColor[params.dataIndex % num];
                // }
              }
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}"
              }
            }
          },
          {
            name: "加油区",
            type: "bar",
            // yAxisIndex: 1,
            data: [5, 6, 6, 7, 8],
            stack: '总量',
            barWidth: 20,
            itemStyle: {
              normal: {
                // barBorderRadius: 20,
                // color: function(params) {
                //   var num = myColor.length;
                //   return myColor[(params.dataIndex+1) % num];
                // }
              }
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}"
              }
            }
          },
          {
            name: "财务室",
            type: "bar",
            // yAxisIndex: 2,
            data: [6, 6, 7, 8, 8],
            stack: '总量',
            barWidth: 20,
            itemStyle: {
              normal: {
                // barBorderRadius: 20,
                // color: function(params) {
                //   var num = myColor.length;
                //   return myColor[(params.dataIndex+2) % num];
                // }
              }
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}"
              }
            }
          },
          {
            name: "便利店",
            type: "bar",
            // yAxisIndex: 0,
            data: [7, 8, 8, 9, 9],
            stack: '总量',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 20, 20, 0],
                // color: function(params) {
                //   var num = myColor.length;
                //   return myColor[(params.dataIndex+3) % num];
                // }
              }
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}"
              }
            }
          }
        ]
      }
    };
  },
  watch: {},
  mounted() {
    data.sort().reverse()
  },
  methods: {}
};
</script>

<style lang="less">
</style>

